<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>build page</title>

    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--
        build page
        01 搭建环境  vue + axios + elementplus
        02 发送请求拿到数据
        03 展示数据
    -->
</head>
<body>
<!--
    el-table  table表格标签
       属性
          data   展示的数据
          style  样式
    el-table-column 列标签
          属性
             prop   展示数据的key
             label  列的头部文本
             width
-->
<div id="app">
    <el-button type="primary" @click="saveBuild">添加</el-button>
    <el-button type="danger" @click="batchDeleteById">批量删除</el-button>
    <!-- 多选框触发的函数
        如果选中了 checkbox 就会触发 handleSelectionChange 这个函数
            拿到 选中对象
     -->
    <el-table :data="buildings" style="width: 95%"
              @selection-change="handleSelectionChange"
    >
        <!-- 多选框的 checkbox-->
        <el-table-column type="selection" :selectable="selectable" width="55"></el-table-column>
        <el-table-column prop="id" label="编号" ></el-table-column>
        <el-table-column prop="numbers" label="楼栋号"></el-table-column>
        <el-table-column prop="units" label="单元" ></el-table-column>
        <el-table-column prop="remarks" label="备注"></el-table-column>

        <el-table-column label="操作">
            <!--  模板 (这个地方 是一个占位置 可以自定义 ) scope当前行的对象数据 -->
            <template #default="scope">
                <!-- 按钮 1  编辑-->
                <el-button size="large" type="primary" @click="handleEdit(scope.row)">
                    编辑
                </el-button>
                <el-button
                        size="large"
                        type="danger"
                        @click="handleDelete(scope.row)"
                >
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页组件
            v-model:current-page="currentPage4" 当前页面
            v-model:page-size="pageSize4"       页面大小
            :page-sizes="[100, 200, 300, 400]"  分页大小可以换
            :total="400"                         总数
            @size-change="handleSizeChange"       每页大小发生变化 触发的函数
            @current-change="handleCurrentChange" 每页CurrentChange发生变化 触发的函数
    -->
    <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="pageSizes"
            :size="size"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
    </el-pagination>

    <el-dialog
            v-model="dialogVisible"
            title="添加build数据"
            width="500"
            @close="handleClose">

        <el-form :model="build" label-width="auto"
                 ref="ruleFormRef"
                 :rules="rules"
                 style="max-width: 600px">
            <el-form-item label="编号" prop="id">
                <el-input v-model="build.id" />
            </el-form-item>

            <el-form-item label="楼栋号" prop="numbers">
                <el-input v-model="build.numbers" />
            </el-form-item>

            <el-form-item label="单元" prop="units">
                <el-input v-model="build.units" />
            </el-form-item>

            <el-form-item label="备注" prop="remarks">
                <el-input v-model="build.remarks" />
            </el-form-item>

        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitBuild">
                    提交数据
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog
            v-model="dialogEditVisible"
            title="修改build数据"
            width="500"
            @close="handleClose">

        <el-form :model="build" label-width="auto" style="max-width: 600px">
            <el-form-item label="编号">
                <el-input v-model="build.id" />
            </el-form-item>

            <el-form-item label="楼栋号">
                <el-input v-model="build.numbers" />
            </el-form-item>

            <el-form-item label="单元">
                <el-input v-model="build.units" />
            </el-form-item>

            <el-form-item label="备注">
                <el-input v-model="build.remarks" />
            </el-form-item>

        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogEditVisible = false">取消</el-button>
                <el-button type="primary" @click="submitUpdateBuild">
                    修改数据
                </el-button>
            </div>
        </template>
    </el-dialog>
</div>

<script>

    const { createApp,ref,onMounted,reactive } = Vue

    //添加引入 消息 message
    const { ElMessage, ElMessageBox } = ElementPlus

    const app = createApp({
        setup(){

            //表单对象
            const ruleFormRef = ref(null)

            let buildings = ref([]);

            let build = ref({
                id:"",
                numbers:"",
                units:"",
                remarks:""
            })

            let ids = ref([])

            //添加按钮是否展示 默认是false
            let dialogVisible =ref(false);
            let dialogEditVisible =ref(false);

            //分页初始化数据

            let currentPage = ref(1);
            let pageSize = ref(2);
            let pageSizes = ref([2,3]);
            let total = ref(0);

            //sizeChange 发生的变化 触发的函数
            let handleSizeChange = (val)=>{
                pageSizes.value = val;
                initData()
            }

            //CurrentChange 发生的变化 触发的函数
            let handleCurrentChange = (val)=>{
                currentPage.value = val;
                initData()
            }

            //定义 校验规则
            const rules = reactive({
                id: [
                    { required: true, message: 'Please input 房屋编号', trigger: 'blur' },
                ],
                numbers: [
                    {
                        required: true,
                        message: 'Please input 房屋编号',
                        trigger: 'blur',
                    }
                ],
                units: [
                    {
                        required: true,
                        message: '请输入单元',
                        trigger: 'blur',
                    }
                ],
                remarks: [
                    {
                        required: true,
                        message: '请输入备注',
                        trigger: 'blur',
                    }
                ]
            })

            //发送请求
            function initData(){
                //分页数据
                axios.get(`/building/list/${currentPage.value}/${pageSize.value}`)
                    .then((data)=>{
                        console.log(data.data)
                        //服务器的数据给vue
                        buildings.value = data.data.data.list;

                        total.value = data.data.data.total;
                    });
            }

            //添加
            function saveBuild(){
                //展示
                dialogVisible.value = true
            }

            //handleClose 关闭 dialog 之前需要做的事情
            function handleClose(){
                console.log("函数执行了。。。handleClose")
                //这里进行清空
                build.value = {
                    id:"",
                    numbers:"",
                    units:"",
                    remarks:""
                }
            }

            //多选框触发的函数
            function handleSelectionChange(arr){
                console.log(arr);
                //拿到选中的 数组的id
                //从数组中拿到 对象 从这个对象中 映射id 返回一个数组
                ids.value = arr.map(build=>build.id);
            }

            //批量删除
            function batchDeleteById(){
                //判断是否有选中的数据
                //js 的判断有坑
                console.log(ids.value)
                if (ids.value.length > 0){
                    //删除
                    //确认框
                    ElMessageBox.confirm(
                        '确定删除吗?',
                        'Warning',
                        {
                            confirmButtonText: '删除',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    )
                        .then(() => {
                            //点击确认的操作
                            // 字符模板  变量放到url上面
                            axios({
                                method:"delete",
                                url:"/building",
                                data:ids.value  //这个data 是json 格式的数组
                            })
                                .then((data)=>{
                                    //提示
                                    //加载数据
                                    ElMessage({
                                        message: data.data.message,
                                        type: 'success',
                                    })
                                    initData()
                                });
                        })
                        .catch(() => {
                            ElMessage({
                                type: 'info',
                                message: 'Delete canceled',
                            })
                        })
                }else{
                    ElMessage({
                        message: '选中数据进行删除',
                        type: 'success',
                    })
                }
            }

            // const submitForm = async (formEl) => {
            //     if (!formEl) return
            //     await formEl.validate((valid, fields) => {
            //         if (valid) {
            //             console.log('submit!')
            //         } else {
            //             console.log('error submit!', fields)
            //         }
            //     })
            // }


            /**
             *   添加校验规则:
             *      <el-form :model="build" label-width="auto"
             *                  ref="ruleFormRef"
             *                  :rules="rules"
             *                  style="max-width: 600px">
             *             <el-form-item label="编号" prop="id">
             *                 <el-input v-model="build.id" />
             *             </el-form-item>
             *     </>el-form>
             *
             *   01 添加    ref="ruleFormRef"  表单对象绑定
             *             :rules="rules"  校验规则绑定
             *             item 添加   prop="id" 属性
             *
             *   02 初始化
             *           const ruleFormRef = ref(null) 表单对象
             *           const rules = reactive({})    规则对象
             *           返回    ruleFormRef,rules
             *
             *    03 提交的时候 进行校验
             *         ruleFormRef.value.validate((valid, fields)=>{
             *             if (valid){
             *
             *             }else{
             *
             *             }
             *         }
             *
             */
                //发送添加数据到服务器
            let submitBuild = ()=>{
                ruleFormRef.value.validate((valid, fields)=>{
                    //校验成功  执行发送数据
                    if (valid){
                        axios.post(
                            "/building",  //url
                            build.value //提交的数据
                        ).then((data)=> {  //成功执行的操作

                            //01 dialog 消失
                            dialogVisible.value = false;
                            //02 提示添加成功
                            ElMessage({
                                message: data.data.message,
                                type: 'success',
                            })
                            //03 加载数据
                            initData()
                        }).catch((err) => { //失败执行的操作
                        })
                    }else{
                        alert("表单校验失败...不能提交数据")
                    }
                })
            }

            //handleEdit  修改
            function handleEdit(obj){
                //弹窗
                dialogEditVisible.value = true;
                //回显
                //直接从前端 获取数据
                //(弹窗修改数据  页面的数据页修改了  地址问题  (页面和 弹窗操作的事同一个地址对象))
                // 通过json 转换 转成字符串 把字符串转成对象 就是一个新地址
                // 克隆
                build.value = JSON.parse(JSON.stringify(obj));
                //通过id 查询数据库的数据  回显数据
            }

            function submitUpdateBuild(){
                //提交数据
                axios({
                    method:"put",
                    url:"/building",
                    data:build.value
                }).then(data=>{
                    //01 关闭
                    dialogEditVisible.value = false;
                    //02 提示
                    ElMessage({
                        message: data.data.message,
                        type: 'success',
                    })
                    //03 刷新数据
                    initData()
                })
            }

            //handleDelete 删除
            function handleDelete(obj){
                console.log()
                let id = obj.id;

                //确认框
                ElMessageBox.confirm(
                    '确定删除吗?',
                    'Warning',
                    {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                       //点击确认的操作
                        // 字符模板  变量放到url上面
                        axios.delete(`/building/${id}`)
                            .then((data)=>{
                                //提示
                                //加载数据
                                ElMessage({
                                    message: data.data.message,
                                    type: 'success',
                                })
                                initData()
                            });
                    })
                    .catch(() => {
                        ElMessage({
                            type: 'info',
                            message: 'Delete canceled',
                        })
                    })
            }

            //这个函数是 页面初始化的时候  执行的钩子好函数
            //一般都是在这个函数中 加载数据 比如页面发请求 获取数据
            onMounted(()=>{
                initData()
            })

            return {
                initData,buildings,build,dialogVisible,
                saveBuild,submitBuild,handleClose,handleDelete,handleSelectionChange,
                batchDeleteById,dialogEditVisible,handleEdit,submitUpdateBuild,ruleFormRef,rules,
                currentPage,pageSize,pageSizes,total,handleCurrentChange,handleSizeChange
            }
        }
    });
    app.use(ElementPlus)

    //解决图标问题
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }

    app.mount('#app')

</script>
</body>
</html>